<template>
    <div style="padding: 10px" class="order-query">
        <search-modal v-if="searchType === 'container' || searchType === 'mat'" :show.sync="searchMenu" :icon-show="false" :width="360">
            <Row class="mb-10">
                <i-col span="10">
                    <search-modal-title :width="100"><Icon type="ios-search" />高级查询</search-modal-title>
                </i-col>
                <i-col span="14" style="text-align: right;">
                    <Button size="small" type="primary" @click="initData">查询</Button>
                    <Button size="small" type="primary" @click="reset">重置</Button>
                </i-col>
            </Row>
            <Form :label-width="100">
                <FormItem label="仓库：">
                    <i-select v-model="seniorSearchForm.warehouse" clearable filterable size="small">
                        <i-option v-for="item in dictInfo.whCode" :key="item.dictValue" :value="item.dictValue" :label="item.dictName" />
                    </i-select>
                </FormItem>
                <FormItem label="品类：">
                    <i-select v-model="seniorSearchForm.matType" clearable filterable size="small">
                        <i-option v-for="item in dictInfo.matType" :key="item.dictValue" :value="item.dictValue" :label="item.dictName" />
                    </i-select>
                </FormItem>
                <FormItem label="保质期：">
                    <InputNumber v-model="seniorSearchForm.validatePeriod" size="small" style="width: 100%;" />
                </FormItem>
                <FormItem label="保税性质：">
                    <i-select v-model="seniorSearchForm.goodsBondedProperty" clearable filterable size="small">
                        <i-option value="0" label="一般贸易" />
                        <i-option value="1" label="保税" />
                    </i-select>
                </FormItem>
                <FormItem label="生产日期：">
                    <Row :gutter="10">
                        <i-col span="11">
                            <DatePicker v-model="seniorSearchForm.dateGenSt" size="small" type="date" placeholder="开始日期" transfer />
                        </i-col>
                        <i-col span="11">
                            <DatePicker v-model="seniorSearchForm.dataGenEd" size="small" type="date" placeholder="结束日期" transfer placement="left" />
                        </i-col>
                    </Row>
                </FormItem>
                <FormItem label="失效日期：">
                    <Row :gutter="10">
                        <i-col span="11">
                            <DatePicker v-model="seniorSearchForm.expireDateSt" size="small" type="date" placeholder="开始日期" transfer />
                        </i-col>
                        <i-col span="11">
                            <DatePicker v-model="seniorSearchForm.expireDateEd" size="small" type="date" placeholder="结束日期" transfer placement="left" />
                        </i-col>
                    </Row>
                </FormItem>
                <FormItem label="入库日期：">
                    <Row :gutter="10">
                        <i-col span="11">
                            <DatePicker v-model="seniorSearchForm.inPlanTimeSt" size="small" type="date" placeholder="开始日期" transfer />
                        </i-col>
                        <i-col span="11">
                            <DatePicker v-model="seniorSearchForm.inPlanTimeEd" size="small" type="date" placeholder="结束日期" transfer placement="left" />
                        </i-col>
                    </Row>
                </FormItem>
                <FormItem label="签订日期：">
                    <Row :gutter="10">
                        <i-col span="11">
                            <DatePicker v-model="seniorSearchForm.contractValidityPeriodStartSt" size="small" type="date" placeholder="开始日期" transfer />
                        </i-col>
                        <i-col span="11">
                            <DatePicker v-model="seniorSearchForm.contractValidityPeriodStartEd" size="small" type="date" placeholder="结束日期" transfer placement="left" />
                        </i-col>
                    </Row>
                </FormItem>
                <FormItem label="合同结束日期：">
                    <Row :gutter="10">
                        <i-col span="11">
                            <DatePicker v-model="seniorSearchForm.contractValidityPeriodEndSt" size="small" type="date" placeholder="开始日期" transfer />
                        </i-col>
                        <i-col span="11">
                            <DatePicker v-model="seniorSearchForm.contractValidityPeriodEndEd" size="small" type="date" placeholder="结束日期" transfer placement="left" />
                        </i-col>
                    </Row>
                </FormItem>
            </Form>
        </search-modal>
        <div class="search-container">
            <el-collapse-transition>
                <div v-show="searchShow">
                    <div class="warehouse">
                        <p class="title">
                            运营企业统计
                            <Button size="small" @click="refresh">
                                <Icon type="md-refresh" :size="18"/>
                            </Button>
                        </p>
                        <div class="warehouse-container flex">
                            <div class="warehouse-item"
                                 :class="companyAllChecked ? ' warehouse-item__checked' : 'warehouse-item__not-checked'"
                                 @click="companyAllCheck">
                                <p class="flex" style="margin-bottom: 5px;">
                                    <span style="font-weight: 700;font-size: 16px;">全部</span>
                                </p>
                                <p class="flex" style="justify-content: space-between; align-items: center;">
                                    <span style="color: rgba(0, 0, 0, 0.35);">重量(吨) | 柜数(柜)</span>
                                    <span style="font-weight: 700;font-size: 16px;">
                                        {{ companyList && companyList.length > 0 ? (companyList.reduce((total, item) => total + item.weight, 0) / 1000).toFixed(3) : 0 }} | {{ companyList && companyList.length > 0 ? companyList.reduce((total, item) => total + item.cabinets, 0) : 0 }}
                                    </span>
                                </p>
                                <p class="flex" style="justify-content: space-between; align-items: center;">
                                    <span style="color: rgba(0, 0, 0, 0.35);">在途 | 在库(吨)</span>
                                    <span style="font-weight: 700;font-size: 16px;">
                                        {{ companyList && companyList.length > 0 ? companyList.reduce((total, item) => total + Number((item.weightArrive / 1000).toFixed(3)), 0).toFixed(3) : 0 }} |
                                        {{ companyList && companyList.length > 0 ? companyList.reduce((total, item) => total + Number((item.weightRemain / 1000).toFixed(3)), 0).toFixed(3) : 0 }}
                                    </span>
                                </p>
                            </div>
                            <div v-for="item in companyList" :key="item.whId" class="warehouse-item"
                                 :class="item.checked ? ' warehouse-item__checked' : 'warehouse-item__not-checked'"
                                 @click="companyClick(item)">
                                <p class="flex" style="margin-bottom: 5px;">
                                    <span style="font-weight: 700;font-size: 16px;">{{ $utils.handleDictData(item.companyId, dictInfo.companyId) }}</span>
                                </p>
                                <p class="flex" style="justify-content: space-between; align-items: center;">
                                    <span style="color: rgba(0, 0, 0, 0.35);">重量(吨) | 柜数(柜)</span>
                                    <span style="font-weight: 700;font-size: 16px;">{{ (item.weight / 1000).toFixed(3) }} | {{ item.cabinets }}</span>
                                </p>
                                <p class="flex" style="justify-content: space-between; align-items: center;">
                                    <span style="color: rgba(0, 0, 0, 0.35);">在途 | 在库(吨)</span>
                                    <span style="font-weight: 700;font-size: 16px;">{{ (item.weightArrive / 1000).toFixed(3) }} | {{ (item.weightRemain / 1000).toFixed(3) }}</span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="stock" style="margin-top: 25px; position: relative;">
                        <p class="title">品名统计</p>
                        <Icon type="ios-arrow-dropleft" size="25"
                              style="position: absolute;left: 10px;top: calc(50% - 12px);cursor: pointer;"
                              @click="scrollChange('left')"/>
                        <Icon type="ios-arrow-dropright" size="25"
                              style="position: absolute;right: 10px;top: calc(50% - 12px);cursor: pointer;"
                              @click="scrollChange('right')"/>
                        <div id="mat-container" class="warehouse-container flex"
                             style="width: 100%; position: relative;overflow-x: auto">
                            <div v-for="(item, index) in matList" :key="index" class="warehouse-item"
                                 :class="item.checked ? ' warehouse-item__checked' : 'warehouse-item__not-checked'"
                                 style="height: 120px; padding-bottom: 10px" @click="matClick(item)">
                                <p style="height: 48px; text-overflow: ellipsis;font-weight: 700;font-size: 16px;overflow: hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;">
                                    {{ item.matName }}
                                </p>
                                <p class="flex" style="justify-content: space-between">
                                    <span style="color: rgba(0, 0, 0, 0.35);">重量(吨) | 柜数(柜)</span>
                                    <span style="font-weight: 700;font-size: 16px;">
                                        {{ (item.weight / 1000).toFixed(3) }} | {{ item.cabinets }}
                                    </span>
                                </p>
                                <p class="flex" style="justify-content: space-between">
                                    <span style="color: rgba(0, 0, 0, 0.35);">在途 | 在库(吨)</span>
                                    <span style="font-weight: 700;font-size: 16px;">
                                        {{ (item.weightArrive / 1000).toFixed(3) }} |
                                        {{ (item.weightRemain / 1000).toFixed(3) }}
                                    </span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </el-collapse-transition>
            <div class="bottom-btn" @click="searchShow = !searchShow">
                <Icon type="ios-menu" class="ios-menu"/>
            </div>
            <div class="bottom-btn2" style="left: calc(50% - 1px)">
            </div>
        </div>

        <!-- tab页-->
        <div class="nav-tab">
            <template v-if="searchType === 'container' || searchType === 'mat'">
                <Menu ref="wareMenu" mode="horizontal" style="font-weight: 700;color:#000;padding: 0 30px; height: 70px" :active-name="menuActiveName" @on-select="menuSelect">
                    <MenuItem v-for="item in companySelected" :key="item.companyId" :name="item.companyId">
                        <p style="height: 20px">{{ $utils.handleDictData(item.companyId, dictInfo.companyId) }}</p>
<!--                        <p style="height: 20px">({{ (item.weight / 1000).toFixed(2) }}吨)</p>-->
                    </MenuItem>
                </Menu>
                <div style="padding-right: 30px">
                    <Input v-model="tableData.searchKey" placeholder="按提单号、箱号、国别、品名查询" style="width: 200px;" clearable @on-search="initData" search></Input>
                    <Button style="width: 100px;background-color: rgba(79, 104, 232, 1); color:#fff; margin-left: 10px" @click="advancedQuery">高级查询</Button>
                </div>
            </template>
        </div>

        <div class="operation">
            <Row>
                <i-col :span="16" style="display: flex; align-items: center">
                    <Checkbox v-if="searchType === 'container' || searchType === 'mat'" size="large" v-model="allCheck" @on-change="allCheckChange"><span style="font-weight: 700; font-size: 13px;">全选</span></Checkbox>
                    <RadioGroup v-model="searchType" size="large" style="margin-left: 10px" @on-change="searchTypeChange">
                        <Radio label="container">
                            <span>按集装箱</span>
                        </Radio>
                        <Radio label="mat">
                            <span>按品名</span>
                        </Radio>
                    </RadioGroup>
                    <Button v-if="searchType === 'mat' || searchType === 'container'" style="width: 100px;background-color: rgba(79, 104, 232, 1); color:#fff; margin-left: 10px" @click="applicationForRelease">解押申请</Button>
                </i-col>
            </Row>

            <Card style="height: 60px; margin-top: 10px; width: 100%" class="ivu-scroll-content">
                <RadioGroup v-model="sortField" size="large" style="margin-left: 10px" @on-change="searchSortChange">
                    <Radio label="contractValidityPeriodStart">
                        <span>按合同开始日</span>
                    </Radio>
                    <Radio label="contractExpirationDate">
                        <span>按合同截止日</span>
                    </Radio>
                    <Divider type="vertical" />
                    <a class="flex-class" @click="switchSort('up')" v-show="switchSortPng === 'up'" style="float: right; margin-top: 2px"><img src="../../assets/images/sort_up.png" width="16"></a>
                    <a class="flex-class" @click="switchSort('down')" v-show="switchSortPng === 'down'" style="float: right; margin-top: 2px"><img src="../../assets/images/sort_down.png" width="16"></a>
                </RadioGroup>
            </Card>
        </div>

        <div class="content" v-loading="loading">
            <Scroll :on-reach-bottom="handleReachBottom" :height="s_height">
                <template v-if="tableData.list && tableData.list.length > 0 && searchType === 'container'">
                    <container-data-card v-for="item in tableData.list" :key="item.id" :data="item" :dictInfo="dictInfo" @on-drop="dropHandle"></container-data-card>
                </template>
                <template v-if="tableData.list && tableData.list.length > 0 && searchType === 'mat'">
                    <goods-data-card v-for="item in tableData.list" :key="item.id" :data="item" :dictInfo="dictInfo" @on-drop="dropHandle"></goods-data-card>
                </template>
                <el-empty v-if="tableData.list.length === 0" description="数据为空"></el-empty>
            </Scroll>
        </div>

        <div>
            <el-dialog
                top="5vh"
                width="30vw"
                :visible.sync="businessTypeModalShow"
                title="选择业务类型"
                :destroy-on-close="true"
                :close-on-click-modal="false"
                @close="businessTypeModalShow = false">
                <el-row style="height: 40px;line-height: 40px;">
                    <el-col :span="24" class="checkbox-label">业务类型</el-col>
                </el-row>
                <el-row style="height: 40px;line-height: 40px;">
                    <el-select
                        v-model="SelectBusinessType"
                        placeholder="请选择"
                        style="width: 100%"
                        filterable>
                        <el-option v-for="i in businessTypeList" :key="i.dictValue" :label="i.dictName" :value="i.dictValue" />
                    </el-select>
                </el-row>
                <el-row style="height: 40px;line-height: 40px;">
                    <el-col :span="24" class="checkbox-label">运营企业</el-col>
                </el-row>
                <el-row style="height: 40px;line-height: 40px;">
                    <el-select
                        v-model="selectCompanyId"
                        placeholder="请选择"
                        style="width: 100%"
                        filterable>
                        <el-option v-for="i in customerCompanyList" :key="i.dictValue" :label="i.dictName" :value="i.dictValue" />
                    </el-select>
                </el-row>
                <template #footer>
                    <el-button size="mini" type="warning" @click="businessTypeModalShow = false">取消</el-button>
                    <el-button :loading="confirmLoading" size="mini" type="primary" @click="confirmSelectBusinessType">确认</el-button>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script>
import DataCard from './dataCard';
import $ from 'jquery';
import api from '@/api/order';
import baseCodeApi from '@/api/baseCode';
import GoodsDataCard from './goodsDataCard';
import ContainerDataCard from './containerDataCard';
import SearchModal from '@/components/search-modal/index.vue';
import SearchModalTitle from '@/components/search-modal/search-modal-title/index.vue';
import axios from 'axios';
export default {
    name: 'orderQuery',
    components: {
        SearchModal,
        SearchModalTitle,
        DataCard,
        GoodsDataCard,
        ContainerDataCard
    },
    data() {
        return {
            menuActiveName: '',
            cancel: null,
            seniorSearchForm: {
                matType: null,
                validatePeriod: null,
                warehouse: null,
                goodsBondedProperty: null,
                dateGenSt: null,
                dataGenEd: null,
                expireDateSt: null,
                expireDateEd: null,
                inPlanTimeSt: null,
                inPlanTimeEd: null,
                contractValidityPeriodStartSt: null,
                contractValidityPeriodStartEd: null,
                contractValidityPeriodEndSt: null,
                contractValidityPeriodEndEd: null
            },
            searchMenu: false,
            allCheck: false,
            searchType: 'container',
            sortField: 'contractValidityPeriodStart',
            switchSortPng: 'up',
            matSelected: [],
            companySelected: [],
            dataSelected: [],
            containerDataSelected: [],
            companyList: [],
            matList: [],
            searchShow: true,
            companyAllChecked: true,
            confirmLoading: false,
            SelectBusinessType: 'internalAgentPurchase',
            selectCompanyId: '',
            businessTypeList: [
                {
                    dictName: '现货质押',
                    dictType: 'ORDER_BUSINESS_TYPE',
                    dictTypeName: null,
                    dictValue: 'spotPledge'
                },
                {
                    dictName: '国内代采',
                    dictType: 'ORDER_BUSINESS_TYPE',
                    dictTypeName: null,
                    dictValue: 'internalAgentPurchase'
                },
                {
                    dictName: '海外采购',
                    dictType: 'ORDER_BUSINESS_TYPE',
                    dictTypeName: null,
                    dictValue: 'abroadPurchase'
                },

            ],
            businessTypeModalShow: false,
            customerCompanyList: [],
            loading: false,
            searchForm: {},
            tableData: {
                pageNum: 1,
                pageSize: 10,
                filterList: [],
                sortList: [],
                list: []
            },
            s_height: $(window).height() - 220,
            screenWidth: null,
            timer: null,
            dictInfo: {
                customerId: []
            },
            statusList: [
                {
                    text: '草稿',
                    value: '0'
                },
                {
                    text: '审批中',
                    value: '1'
                },
                {
                    text: '驳回',
                    value: '2'
                },
                {
                    text: '执行中',
                    value: '3'
                },
                {
                    text: '已完结',
                    value: '7'
                }
            ]
        };
    },
    methods: {

        confirmSelectBusinessType(){
            if (!this.selectCompanyId) {
                this.$Message.error('运营企业必填');
                return;
            }
            this.$router.push({
                path: '/platformApp/order-add',
                query: {
                    label: '新建订单',
                    businessType:this.SelectBusinessType,
                    companyId:this.selectCompanyId,
                    key: "new",
                    disabled: true,
                    showBtn: true,
                    ViewandEdit:true,
                    saveshow:true
                }
            });
        },
        async queryContainerGoodsList() {
            let body = {
                userViewFlag: 1,
                pageNum: this.tableData.pageNum,
                pageSize: this.tableData.pageSize,
                filterList: this.tableData.filterList,
                sortList: this.tableData.sortList,
                companyId: this.menuActiveName,
                searchKey: this.tableData.searchKey,
                entrustingParty: this.$utils.getUserInfo().entrustingParty,
                matType: this.seniorSearchForm.matType,
                validatePeriod: this.seniorSearchForm.validatePeriod,
                warehouse: this.seniorSearchForm.warehouse,
                goodsBondedProperty: this.seniorSearchForm.goodsBondedProperty,
                dateGenSt: this.$utils.dateToDateStr(this.seniorSearchForm.dateGenSt),
                dataGenEd: this.$utils.dateToDateStr(this.seniorSearchForm.dataGenEd),
                expireDateSt: this.$utils.dateToDateStr(this.seniorSearchForm.expireDateSt),
                expireDateEd: this.$utils.dateToDateStr(this.seniorSearchForm.expireDateEd),
                inPlanTimeSt: this.$utils.dateToDateStr(this.seniorSearchForm.inPlanTimeSt),
                inPlanTimeEd: this.$utils.dateToDateStr(this.seniorSearchForm.inPlanTimeEd),
                contractValidityPeriodStartSt: this.$utils.dateToDateStr(this.seniorSearchForm.contractValidityPeriodStartSt),
                contractValidityPeriodStartEd: this.$utils.dateToDateStr(this.seniorSearchForm.contractValidityPeriodStartEd),
                contractValidityPeriodEndSt: this.$utils.dateToDateStr(this.seniorSearchForm.contractValidityPeriodEndSt),
                contractValidityPeriodEndEd: this.$utils.dateToDateStr(this.seniorSearchForm.contractValidityPeriodEndEd)
            }
            if (this.matSelected && this.matSelected.length > 0) {
                body.matNames = this.matSelected.map(x => x.matName);
            }
            if (this.cancel) {
                this.cancel();
            }
            let aCancelToken = new axios.CancelToken((c) => {
                this.cancel = c;
            });
            let { data } = await api.queryContainerGoodsList(body, aCancelToken);
            if (data.returnCode === 200) {
                data.returnData.records.forEach(x => {
                    x.checked = false;
                    x.goodsList = [];
                });
                this.tableData.list = data.returnData.records;
            } else {
                this.$Message.error(data.returnMsg);
            }
            this.loading = false;
        },
        async queryMatNameGoodsList() {
            let body = {
                userViewFlag: 1,
                pageNum: this.tableData.pageNum,
                pageSize: this.tableData.pageSize,
                filterList: this.tableData.filterList,
                sortList: this.tableData.sortList,
                searchKey: this.tableData.searchKey,
                companyId: this.menuActiveName,
                entrustingParty: this.$utils.getUserInfo().entrustingParty,
                matType: this.seniorSearchForm.matType,
                validatePeriod: this.seniorSearchForm.validatePeriod,
                warehouse: this.seniorSearchForm.warehouse,
                goodsBondedProperty: this.seniorSearchForm.goodsBondedProperty,
                dateGenSt: this.$utils.dateToDateStr(this.seniorSearchForm.dateGenSt),
                dataGenEd: this.$utils.dateToDateStr(this.seniorSearchForm.dataGenEd),
                expireDateSt: this.$utils.dateToDateStr(this.seniorSearchForm.expireDateSt),
                expireDateEd: this.$utils.dateToDateStr(this.seniorSearchForm.expireDateEd),
                inPlanTimeSt: this.$utils.dateToDateStr(this.seniorSearchForm.inPlanTimeSt),
                inPlanTimeEd: this.$utils.dateToDateStr(this.seniorSearchForm.inPlanTimeEd),
                contractValidityPeriodStartSt: this.$utils.dateToDateStr(this.seniorSearchForm.contractValidityPeriodStartSt),
                contractValidityPeriodStartEd: this.$utils.dateToDateStr(this.seniorSearchForm.contractValidityPeriodStartEd),
                contractValidityPeriodEndSt: this.$utils.dateToDateStr(this.seniorSearchForm.contractValidityPeriodEndSt),
                contractValidityPeriodEndEd: this.$utils.dateToDateStr(this.seniorSearchForm.contractValidityPeriodEndEd)
            }
            if (this.matSelected && this.matSelected.length > 0) {
                body.matNames = this.matSelected.map(x => x.matName);
            }
            if (this.cancel) {
                this.cancel();
            }
            let aCancelToken = new axios.CancelToken((c) => {
                this.cancel = c;
            });
            let { data } = await api.queryMatNameGoodsList(body, aCancelToken);
            if (data.returnCode === 200) {
                data.returnData.records.forEach(x => {
                    x.checked = false;
                    x.goodsList = [];
                });
                this.tableData.list = data.returnData.records;
            } else {
                this.$Message.error(data.returnMsg);
            }
            this.loading = false;
        },
        async initData(orderNums) {
            this.loading = true;
            this.getSortList();
            switch (this.searchType) {
                case 'container':
                    await this.queryContainerGoodsList();
                    break;
                case 'mat':
                    await this.queryMatNameGoodsList();
                    break;
            }
        },
        handleReachBottom() {
            return new Promise(async resolve => {
                this.tableData.pageSize += 10;
                await this.initData();
                resolve();
            });
        },
        getDictData() {
            baseCodeApi.selectMatName().then(({ data }) => {
                if (data.returnCode === 200) {
                    this.dictInfo.matTypNameList = data.returnData.map(i => {
                        return {
                            dictName: i.matName,
                            dictValue: i.matCode
                        };
                    });
                } else {
                    this.$Message.error(data.returnMsg);
                }
            }).catch(err => {
                console.log(err);
            });
            baseCodeApi.getAllUserCompany().then(({ data }) => {
                if (data.returnCode === 200) {
                    this.dictInfo.companyId = data.returnData.map(i => {
                        return {
                            dictName: i.companyName,
                            dictValue: i.id
                        };
                    });
                } else {
                    this.$Message.error(data.returnMsg);
                }
            }).catch(err => {
                console.log(err);
            });
            baseCodeApi.getOftenTypeByUserId().then(({ data }) => {
                if (data.returnCode === 200) {
                    this.dictInfo.matType = data.returnData.map(i => {
                        return {
                            dictName: i.companyMatName,
                            dictValue: i.companyMatCode
                        };
                    });
                } else {
                    this.$Message.error(data.returnMsg, 'error');
                }
            }).catch(err => {
                console.log(err);
            });
            baseCodeApi.getContractDictData().then(({ data }) => {
                if (data.returnCode === 200) {
                    const { platformWarehouseList, customerList } = data.returnData;
                    this.dictInfo.whCode = platformWarehouseList.map(i => {
                        return {
                            dictName: i.whName,
                            dictValue: i.id
                        };
                    });
                    this.dictInfo.customerId = customerList.map(i => {
                        return {
                            dictName: i.customerName,
                            dictValue: i.id,
                            customerCode: i.customerCode
                        };
                    });
                } else {
                    this.$Message.error(data.returnMsg);
                }
            }).catch(err => {
                console.log(err);
            });

            // 字典
            baseCodeApi.getDictDataByDictTypeList([
                'CONTRACT_STATUS',
                'INVOICE_TYPE',
                'FLIE_TYPE',
                'BUSINESS_TYPE',
                'FEE',
                'BILL_TYPE',
                'ORDER_BUSINESS_TYPE',
                'AGENCY_FEE_TYPE',
                'REPAYMENT_TYPE',
                'RELEASE_TYPE',
                'CHARGE_DIMENSION',
                'DEDUCTION_METHOD',
                'CHARGING_METHOD',
                'PaymentMethod',
                'PAY_COLLECT_FLAG',
                'TRADE_TYPE',
                'TRANS_STATUS',
                'TRADE_MODE',
                'CHARGE_STATUS',
                'DAMAGED_SIGN',
                'CIRCULATION_STATUS',
                'PAYMENT_STATUS',
                'CIRCULATION_TYPE',
                'BILL_STATUS'
            ]).then(({ data }) => {
                if (data.returnCode === 200) {
                    const { returnData } = data;
                    // dataInfo.menuList = data.returnData.filter(item => item.dictType === 'CONTRACT_STATUS');
                    this.dictInfo.dictArr = returnData;
                    this.dictInfo.contractStatus = returnData.filter(item => item.dictType === 'CONTRACT_STATUS');
                    this.dictInfo.businessType = returnData.filter(item => item.dictType === 'ORDER_BUSINESS_TYPE');
                    this.dictInfo.agencyFeesCalType = returnData.filter(item => item.dictType === 'AGENCY_FEE_TYPE');
                    this.dictInfo.repaymentType = returnData.filter(item => item.dictType === 'REPAYMENT_TYPE');
                    this.dictInfo.tradeMode = returnData.filter(item => item.dictType === 'TRADE_MODE');
                    this.dictInfo.releaseType = returnData.filter(item => item.dictType === 'RELEASE_TYPE');
                    this.dictInfo.measureUnit = returnData.filter(item => item.dictType === 'CHARGE_DIMENSION');
                    this.dictInfo.invotp = returnData.filter(item => item.dictType === 'INVOICE_TYPE');
                    this.dictInfo.fileType = returnData.filter(item => item.dictType === 'FLIE_TYPE');
                    this.dictInfo.earnestMoneyDeductionMethod = returnData.filter(item => item.dictType === 'DEDUCTION_METHOD');
                    this.dictInfo.agencyChargingMethod = returnData.filter(item => item.dictType === 'CHARGING_METHOD');
                    this.dictInfo.PaymentMethod = returnData.filter(item => item.dictType === 'PaymentMethod');
                    this.dictInfo.currency = returnData.filter(item => item.dictType === 'FEE');
                    this.dictInfo.sfbz = returnData.filter(item => item.dictType === 'PAY_COLLECT_FLAG');
                    this.dictInfo.bustype = returnData.filter(item => item.dictType === 'BUSINESS_TYPE');
                    this.dictInfo.formsOfCommerce = returnData.filter(item => item.dictType === 'TRADE_TYPE');
                    this.dictInfo.transStatus = returnData.filter(item => item.dictType === 'TRANS_STATUS');
                    this.dictInfo.billType = returnData.filter(item => item.dictType === 'BILL_TYPE');
                    this.dictInfo.chargeStatus = returnData.filter(item => item.dictType === 'CHARGE_STATUS');
                    this.dictInfo.damagedSign = returnData.filter(item => item.dictType === 'DAMAGED_SIGN');
                    this.dictInfo.circulationType = returnData.filter(item => item.dictType === 'CIRCULATION_STATUS');
                    this.dictInfo.paymentStatus = returnData.filter(item => item.dictType === 'PAYMENT_STATUS');
                    this.dictInfo.tranType = returnData.filter(item => item.dictType === 'CIRCULATION_TYPE');
                    this.dictInfo.billStatus = returnData.filter(item => item.dictType === 'BILL_STATUS');
                } else {
                    this.$Message.error(data.returnMsg);
                }
            }).catch(err => {
                console.log(err);
            });
        },
        search() {
            this.loading = true;
            this.tableData.filterList = [];
            if (this.searchForm.purchasingAgreementCode) {
                this.tableData.filterList.push({
                    filterKey: 'purchasingAgreementCode',
                    filterValue: this.searchForm.purchasingAgreementCode
                });
            }
            if (this.searchForm.entrustedEnterprise) {
                this.tableData.filterList.push({
                    filterKey: 'entrustedEnterprise',
                    filterValue: this.searchForm.entrustedEnterprise
                });
            }
            if (this.searchForm.contractValidityPeriod) {
                this.tableData.filterList.push({
                    filterKey: 'contractValidityPeriodStart',
                    filterValue: this.searchForm.contractValidityPeriod[0] ? this.$utils.dateToDateStr(this.searchForm.contractValidityPeriod[0]) : null
                });
                this.tableData.filterList.push({
                    filterKey: 'contractValidityPeriodEnd',
                    filterValue: this.searchForm.contractValidityPeriod[1] ? this.$utils.dateToDateStr(this.searchForm.contractValidityPeriod[1]) : null
                });
            }
            this.initData();
        },
        getSortList() {
            // 先清空
            this.tableData.sortList = [];
            if (this.sortField === 'orderCreatedDate') {
                this.tableData.sortList.push({
                    sortKey: 'created_date',
                    sortValue: this.switchSortPng === 'up' ? 'asc' : 'desc'
                });
            }
            if (this.sortField === 'contractValidityPeriodStart') {
                this.tableData.sortList.push({
                    sortKey: 'contract_validity_period_start',
                    sortValue: this.switchSortPng === 'up' ? 'asc' : 'desc'
                });
            }
            if (this.sortField === 'contractExpirationDate') {
                this.tableData.sortList.push({
                    sortKey: 'contract_validity_period_end',
                    sortValue: this.switchSortPng === 'up' ? 'asc' : 'desc'
                });
            }
        },
        add() {
            // 当前客户运营企业
            baseCodeApi.getCompanyByCustomerId(this.$utils.getUserInfo().entrustingParty).then(({ data }) => {
                if (data.returnCode === 200) {
                    this.customerCompanyList = data.returnData.map(i => {
                        return {
                            dictName: i.companyName,
                            dictValue: i.id
                        };
                    });
                    this.businessTypeModalShow = true;
                } else {
                    this.$Message.error(data.returnMsg);
                }
            }).catch(err => {
                console.log(err);
            });
        },
        refresh() {

        },
        companyAllCheck() {
            this.companyAllChecked = !this.companyAllChecked;
            this.companyList.forEach(x => {
                x.checked = this.companyAllChecked;
            });
        },
        searchTypeChange() {
            this.tableData.pageNum = 1;
            this.tableData.pageSize = 10;
            this.tableData.filterList = [];
            this.tableData.sortList = [];
            this.reset();
        },
        searchSortChange() {
            this.search();
        },
        switchSort(png) {
            if (png === 'up') {
                this.switchSortPng = 'down';
            } else {
                this.switchSortPng = 'up';
            }
            this.searchSortChange();
        },
        async applicationForRelease() {
            let orderNumList = [...new Set(this.dataSelected.map(x => x.orderNum))];
            if (this.searchType === 'container') {
                orderNumList = [...new Set(this.dataSelected.map(x => x.orderNum).concat(this.containerDataSelected.map(x => x.orderNum)))];
            }
            if (orderNumList.length === 0) {
                this.$Message.warning('请至少选择一条数据');
                return;
            }
            if (orderNumList && orderNumList.length > 1) {
                this.$Message.warning('只能选择同一个订单下的数据');
                return;
            }
            if (this.dataSelected && this.dataSelected.find(x => x.cargoReleaseStatus != 3)) {
                this.$Message.warning('只有在库状态才可进行解押申请');
                return;
            }
            if (this.searchType === 'container' && this.containerDataSelected && this.containerDataSelected.find(x => x.cargoReleaseStatus != 3)) {
                this.$Message.warning('只有在库状态才可进行解押申请');
                return;
            }
            if (this.dataSelected && this.dataSelected.find(x => x.quantity)) {
                this.$Message.warning('存在没有解押完成的解压单，不能再次申请解押!');
                return;
            }
            if (this.searchType === 'container' && this.containerDataSelected && this.containerDataSelected.find(x => x.quantity)) {
                this.$Message.warning('存在没有解押完成的解压单，不能再次申请解押!');
                return;
            }
            let { data } = await api.getAgencyFeeInfo({orderNum: orderNumList[0], whether: true});
            if (data.returnCode !== 200) {
                this.$Message.error(data.returnMsg);
                return;
            }
            let goodsActIds = [];
            if (this.searchType === 'container') {
                this.containerDataSelected.forEach(x => {
                    if (x.checked) {
                        goodsActIds = goodsActIds.concat(x.goodsActIds.split(','));
                    } else {
                        goodsActIds = goodsActIds.concat(x.goodsList.map(x => x.id));
                    }
                });
            } else {
                goodsActIds = this.dataSelected.reduce((arr, x) => arr.concat((x.goodsActIds + '').split(',')), []);
            }
            this.$router.push({
                path: '/platformApp/MultipleTransOrder',
                query: {
                    orderNumStr: orderNumList.join(','),
                    idStr: goodsActIds.join(',')
                }
            });
        },
        allCheckChange(val) {
            this.tableData.list.forEach(x => {
                x.checked = val;
            });
        },
        selectWorkOrderGoodsGroupByCompanyId() {
            api.selectWorkOrderGoodsGroupByCompanyId({userViewFlag: 1}).then(({ data }) => {
                if (data.returnCode === 200) {
                    data.returnData.forEach(x => {
                        x.checked = true;
                    });
                    this.companyList = data.returnData.filter(x => x.companyId > 0);
                } else {
                    this.$Message.error(data.returnMsg);
                }
            });
        },
        selectWorkOrderGoodsGroupByMatType(companyIds) {
            let body = {userViewFlag: 1};
            if (companyIds && companyIds.length > 0) {
                body.companyIds = companyIds;
            }
            api.selectWorkOrderGoodsGroupByMatType(body).then(({ data }) => {
                if (data.returnCode === 200) {
                    data.returnData.forEach(x => {
                        x.checked = false;
                    });
                    this.matList = data.returnData;
                } else {
                    this.$Message.error(data.returnMsg);
                }
            });
        },
        scrollChange(type) {
            let times = 0;
            let timer = setInterval(() => {
                if (type === 'left') {
                    document.getElementById('mat-container').scrollLeft -= 40;
                } else {
                    document.getElementById('mat-container').scrollLeft += 40;
                }
                times += 1;
                if (times >= 10) {
                    clearInterval(timer);
                }
            }, 20);
        },
        companyClick(item) {
            item.checked = !item.checked;
        },
        menuSelect(name) {
            this.menuActiveName = name;
        },
        matClick(item) {
            item.checked = !item.checked;
        },
        orderSearchReset() {
            this.searchForm = {};
            this.tableData.filterList = [];
            this.initData();
        },
        reset() {
            this.seniorSearchForm = {
                matType: null,
                validatePeriod: null,
                warehouse: null,
                goodsBondedProperty: null,
                dateGenSt: null,
                dataGenEd: null,
                expireDateSt: null,
                expireDateEd: null,
                inPlanTimeSt: null,
                inPlanTimeEd: null,
                contractValidityPeriodStartSt: null,
                contractValidityPeriodStartEd: null,
                contractValidityPeriodEndSt: null,
                contractValidityPeriodEndEd: null
            }
            this.initData();
        },
        dropHandle(name, data) {
            if(name === 'release'){
                this.$router.push({
                    path: '/platformApp/TransOrder',
                    query: {
                        orderNo: data.orderNum
                    }
                });
            }
            if(name === 'orderInformation'){
                this.$router.push({
                    name: 'orderQuery',
                    params: {
                        orderNums: [data.orderNum]
                    }
                })
            }
        },
        advancedQuery() {
            this.searchMenu = true;
            this.searchShow = false;
        }
    },
    mounted() {
        this.loading = true;
        if (this.$route.query.date) {
            this.searchForm.contractValidityPeriod = JSON.parse(this.$route.query.date).map(x => new Date(x));
            this.search();
        } else {
            this.initData(this.$route.params.orderNums);
        }
        this.getDictData();
        this.selectWorkOrderGoodsGroupByCompanyId();
        this.selectWorkOrderGoodsGroupByMatType();
        const that = this

        window.onresize = () => {
            return (() => {
                window.screenWidth = document.body.clientWidth
                that.screenWidth = window.screenWidth
            })()
        }

    },
    watch:{
        'tableData.list': {
            handler(val) {
                if (this.searchType === 'mat') {
                    this.dataSelected = val.filter(x => x.checked);
                    this.allCheck = this.dataSelected.length === this.tableData.list.length && this.dataSelected.length !== 0;
                }
                if (this.searchType === 'container') {
                    this.containerDataSelected = val.filter(x => x.checked);
                    this.dataSelected = val.reduce((arr, item) => arr.concat(item.goodsList), []).filter(x => x.checked);
                    this.allCheck = this.containerDataSelected.length === this.tableData.list.length && this.containerDataSelected.length !== 0;
                }
            },
            deep: true
        },
        companyList: {
            handler(val) {
                this.companySelected = val.filter(x => x.checked);
                this.companyAllChecked = this.companySelected.length === this.companyList.length;

                if (this.companySelected.length > 0) {
                    this.menuActiveName = this.companySelected[0].companyId;
                    this.$nextTick(() => {
                        this.$refs.wareMenu.updateActiveName();
                    });
                }

                if (this.companySelected.length > 0) {
                    this.selectWorkOrderGoodsGroupByMatType(this.companySelected.map(x => x.companyId));
                } else {
                    this.matList = [];
                }
            },
            deep: true
        },
        matList: {
            handler(val) {
                this.matSelected = val.filter(x => x.checked);
                if (this.companySelected.length > 0) {
                    this.initData();
                } else {
                    this.tableData.list = [];
                }
            },
            deep: true
        },
        screenWidth(val){
            if(!this.timer){
                this.timer = true
                let that = this
                setTimeout(function(){
                    that.s_height = $(window).height() - 180;
                    that.timer = false
                },400)
            }
        },
        menuActiveName: {
            handler() {
                this.initData();
            }
        }
    }
};
</script>

<style lang="less">
.order-query {
    .ivu-tooltip-inner {
        background-color: rgba(70, 76, 91, 0.6)!important;
        font-weight: normal!important;
    }
    .ivu-tooltip-arrow {
        border-bottom-color: rgba(70, 76, 91, 0.6)!important;
    }
}
</style>
<style scoped lang="less">
.operation {
    padding: 20px 20px 0;
    background-color: #f4f7fa;
}
.nav-tab {
    background-color: #fff;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 30px;
}
.search-area {
    width: 100%;
    padding: 10px 15px;
    .search-btn {
        background-color: #4f68e8;
        color: #fff;
        width: 30%;
        max-width: 120px;
    }
    .add-btn {
        background-color: #3e4c64;
        color: #fff;
        margin-left: 5%;
        width: 30%;
        max-width: 120px;
    }
}

.content {
    background-color: #f4f7fa;
    padding: 0 20px 10px 20px;
}
.border-test {
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    border: 50px solid transparent;
    border-bottom-color: red;
    border-radius: 50%;
    transform: rotate(45deg);
}


.font-bold {
    font-weight: 700;
}

.search-container {
    position: relative;
    background-color: #fff;
    border-bottom: 1px solid rgba(217, 217, 217, 1);

    .warehouse, .stock {
        padding: 0 50px;

        .title {
            color: rgba(0, 0, 0, 0.85);
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 12px;
        }
    }

    .warehouse {
        padding-top: 30px;
    }

    .stock {
        padding-bottom: 30px;
    }

    .warehouse-item {
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-width: 276px;
        height: 100px;
        border-radius: 4px;
        border: 1px solid rgba(217, 217, 217, 1);
        background-color: rgba(255, 255, 255, 1);
        padding: 10px 20px;
        color: rgba(0, 0, 0, 0.85);
        margin-right: 10px;
        transition: all .5s;

        &:hover {
            .warehouse-item__checked {
                border: 1px solid rgba(79, 104, 232, 1);
                background-color: rgba(79, 104, 232, 0.1);
            }

            .warehouse-item__not-checked {
                border: 1px solid rgba(217, 217, 217, 1);
                background-color: rgba(255, 255, 255, 1);
            }
        }
    }

    .warehouse-item__checked {
        border: 1px solid rgba(79, 104, 232, 1);
        background-color: rgba(79, 104, 232, 0.1);
    }

    .warehouse-item__not-checked {
        border: 1px solid rgba(217, 217, 217, 1);
        background-color: rgba(255, 255, 255, 1);
    }

    .bottom-btn, .bottom-btn2 {
        cursor: pointer;
        width: 50px;
        height: 0;
        display: block;
        position: absolute;
        left: 50%;
        bottom: -20px;
        border-top: 20px solid #fff;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        text-align: center;
        z-index: 100;
        transition: all .3s;
        font-size: 20px !important;

        &:hover {
            transform: scale(1.2) translateY(1px);
        }

        &:hover + .bottom-btn2 {
            transform: scale(1.2) translateY(2px);
        }

        .ios-menu {
            position: absolute;
            top: -20px;
            right: 4px;
            transition: all .3s;
        }
    }

    .bottom-btn2 {
        width: 52px;
        bottom: -21px;
        border-top: 21px solid rgba(217, 217, 217, 1);
        z-index: 90;
    }
}
</style>
